<template>
  <div class="question-new-container">
    <!-- 卡片区 -->
    <el-card class="box-card">
      <!-- form表单组件应用 -->
      <el-form
        :rules="rules"
        ref="addFormRef"
        :model="addForm"
        label-width="120px"
      >
        <!--:model作用：可以使得el-form针对表单的全部信息进行收集，固定属性-->
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="addForm.subjectID">
            <el-option
              v-for="item in subjectIDList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="addForm.catalogID">
            <el-option
              v-for="item in catalogIDList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="addForm.enterpriseID">
            <el-option
              v-for="item in enterpriseIDList"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="province">
          <el-select v-model="addForm.province" @change="addForm.city = ''">
            <el-option
              v-for="(item, k) in provinces()"
              :key="k"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select v-model="addForm.city">
            <el-option
              v-for="(item, k) in citys(addForm.province)"
              :key="k"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="addForm.direction">
            <el-option
              v-for="item in directionList"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio-group v-model="addForm.questionType">
            <el-radio
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.value.toString()"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="addForm.difficulty">
            <el-radio
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.value.toString()"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <!-- 表单域 -->
        <el-form-item label="题干：" prop="question">
          <el-input type="textarea" v-model="addForm.question"></el-input>
        </el-form-item>
        <el-form-item label="选项：" v-if="addForm.questionType !== '3'">
          <!-- ABCD选项表单的绘制 -->
          <!-- 单选框按钮 -->
          <template v-if="addForm.questionType === '1'">
            <div class="active">
              <el-radio v-model="singleSelect" label="0">
                A.
                <el-input v-model="addForm.options[0].title"></el-input>
              </el-radio>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
            <br />
            <div class="active">
              <el-radio v-model="singleSelect" label="1">
                B.
                <el-input v-model="addForm.options[1].title"></el-input>
              </el-radio>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
            <br />
            <div class="active">
              <el-radio v-model="singleSelect" label="2">
                C.
                <el-input v-model="addForm.options[2].title"></el-input>
              </el-radio>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>

            <br />
            <div class="active">
              <el-radio v-model="singleSelect" label="3">
                D. <el-input v-model="addForm.options[3].title"></el-input>
              </el-radio>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
          </template>

          <!-- 复选框表单域 -->
          <template v-if="addForm.questionType === '2'">
            <div class="active">
              <el-checkbox v-model="addForm.options[0].isRight"
                >A. <el-input v-model="addForm.options[0].title"></el-input
              ></el-checkbox>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
            <br />
            <div class="active">
              <el-checkbox v-model="addForm.options[1].isRight"
                >B. <el-input v-model="addForm.options[1].title"></el-input
              ></el-checkbox>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
            <br />
            <div class="active">
              <el-checkbox v-model="addForm.options[2].isRight"
                >C. <el-input v-model="addForm.options[2].title"></el-input
              ></el-checkbox>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
            <br />
            <div class="active">
              <el-checkbox v-model="addForm.options[3].isRight"
                >D. <el-input v-model="addForm.options[3].title"></el-input
              ></el-checkbox>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="avatar-uploader-icon">上传图片</i>
                <i class="el-icon-circle-close del"></i>
              </el-upload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label="视频解析：" prop="videoURL">
          <el-input type="textarea" v-model="addForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析：" prop="answer">
          <el-input type="textarea" v-model="addForm.answer"></el-input>
        </el-form-item>
        <el-form-item label="题目备注：" prop="remarks">
          <el-input type="textarea" v-model="addForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签：" prop="tags">
          <el-input type="text" v-model="addForm.tags"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="$refs.addFormRef.resetFields()"
            >取消/重置</el-button
          >
          <el-button type="primary" @click="tianjia()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/questions.js' // 试题
import { list as listCompanys } from '@/api/hmmm/companys' // 企业
import { simple as simpleSubjects } from '@/api/hmmm/subjects' // 学科
import { simple as simpleDirectorys } from '@/api/hmmm/directorys' // 二级目录
import { provinces, citys } from '@/api/hmmm/citys' // 城市和区县
// 常量(方向)
// import { direction as directionList } from '@/api/hmmm/constants'
import { direction as directionList, questionType as questionTypeList, difficulty as difficultyList } from '@/api/hmmm/constants'// 题型按钮

export default {
  data () {
    return {
      // 添加试题 表单数据对象
      addForm: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        enterpriseID: '', // 企业
        city: '', // 区县
        province: '', // 城市
        direction: '', // 方向
        questionType: '1', // 默认“单选” 题型 项目被选中(要求是字符串)
        difficulty: '1', // 默认 难度 第一个项目被选中(要求是字符串)
        question: '', // 题干
        answer: '', // 答案
        remarks: '', // 备注
        tags: '', // 标签
        videoURL: '', // 解析视频
        options: [
          // {code: '编号ABCD', title: '当前项目文字答案描述',
          //   img: '当前项目图片答案', isRight: boolean表明当前项目是否是答案},
          { code: 'A', title: '', img: '', isRight: false },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ]
      },
      subjectIDList: [], // 学科
      catalogIDList: [], // 二级目录
      directionList, // 方向(简易成员赋值)
      enterpriseIDList: [], // 企业
      questionTypeList, // 题型(简易成员赋值)
      difficultyList, // 难度 简易成员复制
      singleSelect: '', // 临时成员，接收“选项”单选按钮选中的信息
      imageUrl: '',
      rules: {
        subjectID: [{ required: true, message: '请输入学科', trigger: 'blur' }],
        catalogID: [
          { required: true, message: '请输入目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请输入企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        city: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        question: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]

      }
    }
  },
  created () {
    this.getEnterpriseIDList()
    this.getSubjectIDList()
    this.getCatalogIDList()
  },
  methods: {
    provinces, // 获得城市的方法
    citys, // 获得地区的方法
    // 学科 列表信息
    async getSubjectIDList () {
      var result = await simpleSubjects()
      this.subjectIDList = result.data
    },
    // 目录 列表信息
    async getCatalogIDList () {
      var result = await simpleDirectorys()
      this.catalogIDList = result.data
    },
    // 获得 企业 列表信息
    async getEnterpriseIDList () {
      var result = await listCompanys()
      this.enterpriseIDList = result.data.items
      // console.log(result.data.items)
    },
    tianjia () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          await add(this.addForm)
          this.$message.success('添加成功')
          // 页面跳转--->列表页面
          this.$router.push('/questions/list')
        } else {
          this.$message.error('请填写必填项')
          return false
        }
      })
    }
  },
  watch: {
    singleSelect (newV) {
      // 1. 全部项目的isRight为false
      for (var i = 0; i < 4; i++) {
        this.addForm.options[i].isRight = false
      }
      // 2. 当前选中项目的isRight为true，并且选中项目的下标 与 newV 一致
      this.addForm.options[newV].isRight = true
    }
  }
}
</script>

<style rel="stylesheet/scss" scoped lang="scss">
.el-radio {
  padding-bottom: 20px;
}
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  // overflow: hidden;
  width: 100px;
  font-size: 12px;
  height: 60px;
  text-align: center;
  margin-left: 35px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 60px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
}
.avatar-uploader-icon {
  font-style: normal;
  font-size: 15px;
}
.del {
  position: absolute;
  top: -5px;
  right: -5px;
}
.active {
  display: flex;
  align-items: center;
}
.el-checkbox {
  margin-bottom: 30px;
}
</style>
